<script lang="ts" setup>
import { ref } from 'vue';
import { useData } from 'vitepress';
import { useI18n } from '@/i18n';
import AppContent from '@/components/AppContent.vue';
import BannerLevel2 from '@/components/BannerLevel2.vue';
import useWindowResize from '@/components/hooks/useWindowResize';

import banner from '@/assets/illustrations/banner-secondary.png';
import illustration from '@/assets/illustrations/onlineCommunication.png';

const i18n = useI18n();
const { lang } = useData();

const windowWidth = ref(useWindowResize());
</script>

<template>
  <ClientOnly>
    <BannerLevel2 :background-image="banner" :title="i18n.onlineCommunication.title" :illustration="illustration" />
    <AppContent>
      <div class="online-communication">
        <p class="text">
          {{ i18n.onlineCommunication.text }}
        </p>
        <h3 class="title">{{ i18n.onlineCommunication.caption }}</h3>
        <div class="maillist-table">
          <OTable :data="i18n.onlineCommunication.mail_list" header-cell-class-name="mirror-list-header" cell-class-name="mirror-list-row" style="width: 100%">
            <el-table-column :label="i18n.onlineCommunication.thead[0]" prop="name">
              <template #default="scope">
                <a class="link" :href="scope.row.gitLink" target="_blank" rel="noopener noreferrer">
                  {{ scope.row.name }}
                </a>
              </template>
            </el-table-column>
            <el-table-column :label="i18n.onlineCommunication.thead[1]" prop="emailAddress">
              <template #default="scope">
                <a class="link" target="_blank" rel="noopener noreferrer" :href="scope.row.websiteLink">
                  {{ scope.row.emailAddress }}
                </a>
              </template>
            </el-table-column>
            <el-table-column v-if="windowWidth > 768" :label="i18n.onlineCommunication.thead[2]" prop="desc">
              <template #default="scope">
                <div class="ellipsis">
                  {{ scope.row.desc }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :width="windowWidth > 768 ? '220px' : '100px'" :label="i18n.onlineCommunication.thead[3]" prop="archive">
              <template #default="scope">
                <a :href="scope.row.archiveLink" class="link" target="_blank" rel="noopener noreferrer">
                  {{ scope.row.archive }}
                </a>
              </template>
            </el-table-column>
          </OTable>
        </div>
        <h4 class="sub-title">{{ i18n.onlineCommunication.caption1 }}</h4>
        <p class="text">{{ i18n.onlineCommunication.caption_List.title }}</p>
        <ul class="list">
          <li v-for="(item, index) in i18n.onlineCommunication.caption_List.list" :key="index" class="text">
            {{ item }}
          </li>
        </ul>
        <template v-if="lang === 'zh'">
          <p class="text">
            {{ i18n.onlineCommunication.tips }}
          </p>
          <img class="mail-img" :src="i18n.onlineCommunication.mailimg" style="width: 65%" />
        </template>
        <h4 class="sub-title">{{ i18n.onlineCommunication.caption2 }}</h4>
        <p class="text">
          {{ i18n.onlineCommunication.caption2_text }}
        </p>
        <h4 class="sub-title">{{ i18n.onlineCommunication.caption3 }}</h4>
        <p class="text">
          {{ i18n.onlineCommunication.caption3_text }}
        </p>
      </div>
    </AppContent>
  </ClientOnly>
</template>

<style lang="scss" scoped>
@include in-dark {
  img {
    @include img-in-dark;
  }
}
.online-communication {
  .text {
    font-size: var(--e-font-size-text);
    line-height: var(--e-line-height-text);
    color: var(--e-color-text4);
  }
  .title {
    font-size: var(--e-font-size-h5);
    line-height: var(--e-line-height-h5);
    color: var(--e-color-text1);
    margin: var(--e-spacing-h2) 0 var(--e-spacing-h4);
    @media screen and (max-width: 1100px) {
      margin: var(--e-spacing-h4) 0 var(--e-spacing-h6);
      font-size: var(--e-font-size-h6);
      line-height: var(--e-line-height-h6);
    }
  }
  .sub-title {
    font-size: var(--e-font-size-h7);
    line-height: var(--e-line-height-h7);
    color: var(--e-color-text1);
    margin: var(--e-spacing-h2) 0 var(--e-spacing-h4);
    @media screen and (max-width: 1100px) {
      font-size: var(--e-font-size-h8);
      line-height: var(--e-line-height-h8);
      margin: var(--e-spacing-h4) 0 var(--e-spacing-h6);
    }
  }
  .list {
    li {
      margin-left: var(--e-spacing-h4);
      list-style: circle;
    }
  }
  .mail-img {
    margin-top: var(--e-spacing-h6);
  }
}
.link {
  font-size: var(--e-font-size-h8);
  line-height: var(--e-line-height-h8);
  @media screen and (max-width: 1100px) {
    font-size: var(--e-font-size-text);
    line-height: var(--e-line-height-text);
  }
}
</style>
